<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test03</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<script id="template01" type="text/x-template">
    <div style="background-color: yellow" foo="foo">
        {{compTitle}}: <input v-model="counter" v-bind="$attrs">
        <button @click="incrementCounter">Click</button>
    </div>
</script>

<div id="app">
    <p>Total: {{total}}</p>

    <text-btn :comp-title="item.title"
              :key="item.key"
              @counter-event="countTotal"
              bar="foo" foo="bar"
              style="color: red" v-bind="stu01"
              v-for="item in titles"></text-btn>

    <button @click="click">Test</button>

</div>

<script>
    class Person {

    }

    Vue.component('text-btn', {
        template: '#template01',
        inheritAttrs: false,
        // props: ['compTitle', 'name', 'age'],
        props: {
            'compTitle': [String], 'name': {
                type: [String, Person],
                // required: true,
                default: 'lisi',
                validator: function (val) {
                    if (val.length < 5) {
                        return false;
                    } else {
                        return true;
                    }
                }
            }, 'age': [String, Number],
            // 'foo': [String]
        },
        data: function () {
            return {
                counter: 0,
            }
        },
        methods: {
            incrementCounter: function () {
                // this.compTitle = "Hello";
                this.counter++;
                this.$emit('counter-event', this.counter);

                console.log(this.name);
                console.log(this.age);
            }
        }
    });

    let vm = new Vue({
        el: '#app',
        data: {
            message: '',
            total: 0,
            titles: [
                {title: 'TL01', key: 'key01'},
                {title: 'TL02', key: 'key02'},
                {title: 'TL03', key: 'key03'},
            ],
            stu01: {
                name: 'zhangsan',
                // name: null,
                age: '18'
            }
        },
        methods: {
            click: function () {
                // vm.titles.push({title: 'TL04', key: 'key04'});
                Vue.set(this.titles[0], 'title', 'TL001');
            },
            countTotal: function (val) {
                this.total++;
                // alert(val);
            }
        }
    });


</script>

</body>
</html>